博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery 跨域问题
阅读量:6672 次
发布时间:2019-06-25

本文共 3999 字,大约阅读时间需要 13 分钟。

  hot3.png

JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念。当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的唯一方法。

getJSON的用法JQuery手册已经写得很详细,参考手册就可以了,很简单。需要指出的一点是getJSON利用的jsonp需要客户端与服务端作出配合。

  1. 客户端传递的URL里要包含callback变量,以形如callback=?的形式结尾。(jquery会随机生成一个字符串替换?传递给服务端)
  2. 服务端获取客户端传递的callback的值callbackValue,和需要传递的json字符串构成 callbackValue.’(’.json.’)'传回给客户端(示例为php字符串连接方式,其他语言类似)

不出意外的话应该已经可以跨域读取了。

同时输出json数据时候{之前的是(

的中,由于安全的问题,浏览器默认是不支持跨域调用的。传统的方法,包括:(参考)

Local proxy:Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client).Flash:Remote host needs to deploy a crossdomain.xml file, Flash is relatively proprietary and opaque to use, requires learning a one-off moving target programming langage.Script tag:Difficult to know when the content is available, no standard methodology, can be considered a "security risk".

以上方法都各有缺陷,都不是很好多解决方案。后来出现了一种叫JSON with Padding的技术,简称JSONP.(原理参考),应 用JSONP可以实现JSON数据的跨域调用。非常的幸运,JQuery1.2以后支持JSONP的应用。下面侧重说明在JQuery中,Json的跨域调用。

      应用JSONP实现Json数据跨域调用,需要端与客户端的合作完成。引用Jquery官方的例子,客户端掉用如下:

$.getJSON(" http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? ", function(data){ $.each(data.items, function(i,item){ $("").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });

    注意这里调用的地址中jsoncallback=?是关键的所在!其中,符号会被Query自动替换成其他的回调方法的名称,具体过程和原理我们这里不理 会。我们关心的是jsoncallback=?起什么作用了?原来jsoncallback=?被替换后,会把方法名称传给服务器。我们在服务器端要做什 么工作呢?服务器要接受参数jsoncallback,然后把jsoncallback的值作为JSON数据方法名称返回,比如服务器是,我们会这 样做:

      ...

      String jsoncallback=request.getParameter("jsoncallback");

      ...

      out.print(jsoncallback+"({\"account\":\"XX\",\"passed\":\"true\",\"error\":\"null\"})");

Jquery取得的可能如下:

      JQUET0988788({"account":"XX","passed":"true","":"null"})

总结,用JSONP要做两件事:

      1/请求地址加参数:jsoncallback=?

      2/服务器段把jsoncallback的值作为方法名传回来,如JQUET098788(...)

jQuery从1.2开始就支持XMLHttp跨域请求了,具体怎么操作?

jQuery中跨域访问的核心原理:JS文件注入,因为因为script标签的src属性是可以跨域的,利用script标签的src属性直接返回非本域名下的数据,具体采用的方式称为:jsonp。

代码:

   test.html,例如位于www.qq.com

            
jQuery-跨域请求
   
server.php,例如位于
www.baidu.com

  今天上午,路路同学问了一个JQuery跨域读取json数据的问题。JQuery用得很少,还真没实际试过。于是上网找个找,看到了JQ的$.getJSON() 方法。先介绍下概念性的东西,网上找的,简单看看就行了。

1.JSONP(JSON with Padding-填充json数据也就是常用的json跨域方式):利用script标签,通过特定的src地址的调用,来执行一个客户端的js函数,在 服务器端生成相对的数据(json格式)并以参数的形式传递给这个客户端的js函数并执行这个函数,前提是需要服务器端的数据输出支持。       

2.为什么使用JSONP:由于 JSON 只是一种含有简单括号结构的纯文本,因此许多通道都可以交换 JSON 消息。因为同源策略的限制,我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法,即通过使用 JSON 与 <script> 标记相结合的方法,从服务端直接返回可执行的JavaScript函数调用或者JavaScript对象。       

3.谁在使用JSONP:dojo、JQuery、Youtube GData API 、Google Social Graph API 、Digg API 、GeoNames webservice、豆瓣API、Del.icio.us JSON API等。

------------------------------------------------------------------------------------------------

  和 AJAX 一样,JSONP 实际上也是早已存在,只是说法相对比较新颖(貌似也出来很久了)。自 1.2 版本起,JQuery加入了对 JSONP 的支持()。我们可以很容易的利用 $.getJSON() 方法(或者其它基于 $.ajax() 的方法),来跨域加载 JSON 数据。我参考官网,写了个JQ测试的例子:

a.html

Click me

profile2.php

'lava', 'nick' => '比目鱼', 'contact' => array( 'MSN' => 'lavaguo#msn.com', 'email' => 'guo.feng#zol.com.cn', 'website' => 'http://www.zol.com.cn', ));$arr = gb2312ToUtf8($arr);//中文需要转UTF-8$json = json_encode($arr);//转成json数组if (!empty($callback)) { $json = $callback . '(' . $json . ')';//注意这里的格式,调试时这里费了点时间}echo $json;function gb2312ToUtf8(&$input){ if (!is_array($input)) { $input = iconv('GB2312', 'UTF-8', $input); } else { foreach ($input as $k=>$v) { gb2312ToUtf8(&$input["$k"]); } } return $input;}?>

你可能注意到上面的例子中,url 被写成了,需要说明的是,这个问号会被 jQuery 自动替换为回调函数的函数名(如果是一个匿名函数,JQuery 会自动生成一个带时间戳的函数名)。

总结下JSONP原理:

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。

然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

转载于:https://my.oschina.net/hosir/blog/129243

你可能感兴趣的文章
巧用伪元素解决fixed元素被百度浏览器屏蔽问题
查看>>
[北京][10-30K] 上过 Apple WWDC,被 Google I/O 推荐的 iHealth(中国)"职"等你!
查看>>
Flume将 kafka 中的数据转存到 HDFS 中
查看>>
SpringBoot | SpringBoot 是如何实现日志的?
查看>>
书写一个管理平台开发常用的通用table组件
查看>>
Xcode 9 快速跳转到定义新姿势(Jump to Definition)
查看>>
js 当数值过大相减精度丢失的一个思路
查看>>
Java杂谈
查看>>
java 现成网站源码 SSM 框架 freemaker静态引擎 springmvc
查看>>
Mac下 Ubuntu 16 04 配置http、https
查看>>
使用docker搭建gitlab以及ci平台,完整版本(使用springboot项目演示)
查看>>
前端基础25:jQuery的一些常用方法
查看>>
Django搭建个人博客:用户的注册
查看>>
正则表达解析 Markdown 语法
查看>>
使用 Kotlin 编写你的第一个 Firefox WebExtension 扩展
查看>>
源码分析 (三) Stack 源码分析
查看>>
android studio - 使用
查看>>
022-会Excel就会数据分析(Kylin2.6.1+Excel+Power BI)
查看>>
SimpleTouch:事件分发可以如此清晰
查看>>
类字面常量
查看>>